.qribbon__corner--top-left
  top: -10px
  left: -10px

  &::before,
  &::after
    border-top-color: transparent
    border-left-color: transparent

  &::before
    top: 0
    right: 8px
    z-index: 9999

  &::after
    bottom: 8px
    left: 0
    z-index: 9999

  div
    right: -35px
    top: 40px
    transform: rotate(-45deg)

.qribbon__corner--bottom-left
  bottom: -10px
  left: -10px

  &::before,
  &::after
    border-bottom-color: transparent
    border-left-color: transparent

  &::before
    bottom: 0
    right: 8px
    z-index: 9999

  &::after
    top: 8px
    left: 0
    z-index: 9999

  div
    right: -35px
    bottom: 40px
    transform: rotate(45deg)

.qribbon__corner--top-right
  top: -10px
  right: -10px

  &::before,
  &::after
    border-top-color: transparent
    border-right-color: transparent

  &::before
    top: 0
    left: 8px
    z-index: 9999

  &::after
    bottom: 8px
    right: 0
    z-index: 9999

  div
    left: -35px
    top: 40px
    transform: rotate(45deg)

.qribbon__corner--bottom-right
  bottom: -10px
  right: -10px

  &::before,
  &::after
    border-bottom-color: transparent
    border-right-color: transparent

  &::before
    bottom: 0
    left: 8px
    z-index: 9999

  &::after
    top: 8px
    right: 0
    z-index: 9999

  div
    left: -35px
    bottom: 40px
    transform: rotate(-45deg)
.qribbon__corner--top-left,
.qribbon__corner--top-right,
.qribbon__corner--bottom-left,
.qribbon__corner--bottom-right
  width: 150px
  height: 150px
  overflow: hidden
  position: absolute
  background: transparent !important
  z-index: 1

  &::before,
  &::after
    position: absolute
    z-index: -1
    content: ''
    display: block
    border: 5px solid var(--qribbon-leaf-color, black)

  div
    position: absolute
    display: block
    width: 250px
    padding: 7px 0
    background-color: var(--qribbon-background-color, black)
    text-transform: uppercase
    text-align: center
    color: var(--qribbon-text-color, black)

    a
      color: var(--qribbon-text-color, black)
